<template>
  <div>
    <!-- 框 -->
    <textarea
      class="comment-textarea"
      v-model="commentContent"
      placeholder="写下点什么..."
      maxlength="1000"
    />
    <!-- 按钮 -->
    <div class="myBetween" style="margin-bottom: 10px">
      <div style="display: flex">
        <div :class="{ 'emoji-active': showEmoji }" @click="showEmoji = !showEmoji">
          <i class="el-icon-orange myEmoji"></i>
        </div>
        <div @click="openPicture()">
          <i class="el-icon-picture myPicture"></i>
        </div>
      </div>

      <div style="display: flex">
        <!--        <proButton :info="'涂鸦'"-->
        <!--                   v-show="!$common.mobile() && !disableGraffiti"-->
        <!--                   @click.native="showGraffiti()"-->
        <!--                   :before="$constant.before_color_1"-->
        <!--                   :after="$constant.after_color_1"-->
        <!--                   style="margin-right: 6px">-->
        <!--        </proButton>-->
        <ProButton
          :info="'提交'"
          @click.native="submitComment()"
          :before="$constant.before_color_2"
          :after="$constant.after_color_2"
        >
        </ProButton>
      </div>
    </div>
    <!-- 表情 -->
    <!-- <emoji @addEmoji="addEmoji" :showEmoji="showEmoji"></emoji> -->

    <el-dialog
      title="图片"
      :visible.sync="showPicture"
      width="25%"
      :append-to-body="true"
      destroy-on-close
      center
    >
      <div>
        <!-- <uploadPicture
          :prefix="'commentPicture'"
          @addPicture="addPicture"
          :maxSize="5"
          :maxNumber="1"
        ></uploadPicture> -->
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref,computed } from 'vue'
import ProButton from '@/pages/navbar/common/ProButton.vue'
import useUserStore from "@/store/modules/user";

let userStore = useUserStore()

const emit = defineEmits(['submitComment','showGraffiti'])

const props = defineProps({
    disableGraffiti: {
      type: Boolean,
      default: false
    }
  })
  const commentContent = ref("");
  const showEmoji = ref(false);
  const showPicture = ref(false);
  const picture = ref({
    name: userStore.currentUser.username,
    url: ""
  });

  const openPicture = () => {
    if (isEmpty(userStore.currentUser)) {
      this.$message({
        message: "请先登录！",
        type: "error"
      });
      return;
    }

    showPicture.value = true;
  };

  const addPicture = (res) => {
    picture.value.url = res;
    savePicture();
  };

  const savePicture = () => {
    let img = "<" + picture.value.name + "," + picture.value.url + ">";
    commentContent.value += img;
    picture.value.url = "";
    showPicture.value = false;
  };

  const addEmoji = (key) => {
    commentContent.value += key;
  };

  const showGraffiti = () => {
    if (isEmpty(userStore.currentUser)) {
      this.$message({
        message: "请先登录！",
        type: "error"
      });
      return;
    }

    commentContent.value = "";
    emit("showGraffiti");
  };

  const submitComment = () => {
    if (isEmpty(userStore.currentUser)) {
      this.$message({
        message: "请先登录！",
        type: "error"
      });
      return;
    }

    if (commentContent.value.trim() === "") {
      this.$message({
        message: "你还没写呢~",
        type: "warning"
      });
      return;
    }

    emit("submitComment", commentContent.value.trim());
    commentContent.value = "";
  };

  const isEmpty = (obj) => {
    return Object.keys(obj).length === 0;
  };

  const pictureUrl = computed(() => {
    return picture.value.url;
  });
</script>

<style scoped>
.comment-textarea {
  border: 1px solid var(--lightGray);
  width: 100%;
  font-size: 14px;
  padding: 15px;
  min-height: 180px;
  /* 不改变大小 */
  resize: none;
  /* 不改变边框 */
  outline: none;
  border-radius: 4px;
  background-image: var(--commentURL);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100%;
  margin-bottom: 10px;
}

.comment-textarea:focus {
  border-color: var(--themeBackground);
}

.myEmoji {
  font-size: 18px;
  cursor: pointer;
  transition: all 0.5s;
  margin-right: 12px;
}

.myEmoji:hover {
  transform: rotate(360deg);
  font-size: 22px;
}

.myPicture {
  font-size: 18px;
  cursor: pointer;
}

.emoji-active {
  color: var(--red);
}
</style>
